<template>
  <a-card :title="$t('My Survey')">
    <a-table bordered :dataSource="dataSource" :columns="columns" />
  </a-card>
  <a-modal v-model:open="open" :title="$t('Survey Review')">
      <a-form layout="vertical" :disabled="handleType !== 'edit'">
          <a-form-item >
            <h1>{{currentSurvey.name}}</h1>
            <h5>{{currentSurvey.description}}</h5>
          </a-form-item>
          <a-form-item v-for="(item, index) in currentSurvey.questions" :key="item.id" :label="`${index + 1}.${item.name}`">
            <a-radio-group v-model:value="item.value" v-if="item.type === 'radio'">
                <a-radio v-for="option in item.options" :key="option.id" :value="option.value">{{option.value}}</a-radio>
            </a-radio-group>
            <a-checkbox-group v-if="item.type === 'checkbox'"  name="checkboxgroup">
                <a-checkbox v-for="option in item.options" :key="option.id" :value="option.value">{{option.value}}</a-checkbox>
            </a-checkbox-group>
            <a-textarea v-if="item.type === 'text'" style="max-height:100px;min-height:100px" :rows="4" />
          </a-form-item>
    
        </a-form>
        <template #footer >
            <a-space>
                <a-button  @click="open = false">{{$t('Close')}}</a-button>
                <a-button type="primary"  @click="open = false">{{$t('Submit')}}</a-button>
                 <!-- <a-button type="primary" danger v-if="handleType === 'audit'">{{$t('Reject')}}</a-button>
                <a-button type="primary" v-if="handleType === 'audit'">{{$t('Pass')}}</a-button> -->
            </a-space>
        </template>
   </a-modal>
</template>
<script lang="ts" setup>

import { AuditOutlined, EditOutlined, SearchOutlined } from '@ant-design/icons-vue';
import { ref } from "vue"

import { getMySurveys, getList} from "../../api/survey"
import { useI18n } from "vue-i18n";
const { t } = useI18n();
           
const dataSource = ref<any []>([])
const columns = ref([
  { title: t('Survey Title'), dataIndex: 'title', key: 'title', ellipsis: true},
  { title: t('Survey Points'), dataIndex: 'points',  key: 'points', width: 200},
  { title: t('Finish Status'), dataIndex: 'finishStatus', key: 'finishStatus', width: 200},
  { title: t('Audit Status'), dataIndex: 'auditStatus', key: 'auditStatus', width: 200},
])
const open = ref<boolean>(false)
const handleType = ref<string>()
const currentSurvey = ref()
const checkSurvey = (item:any, type:string) => {
    open.value = true;
    handleType.value = type
    currentSurvey.value = item
}
const querySurveyList = () => {
  let params = {

  }
  getMySurveys(params).then(res =>{
    if (res?.status == 200 && res?.data?.data) {
      dataSource.value = res?.data?.data
    }
  })
}

querySurveyList()



</script>
<style scoped>
.servey-list{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.servey-list-item{
  width: 22.5%;
  margin-bottom: 20px;
}
</style>